<html>
<head>
    <title>Video On Demand for Any Device</title>
    <!--<script src="video.js" type="text/javascript"></script>-->
</head>
<body>
    <h1>Video On Demand for Any Device Test Page</h1>
    <p></p>
    <!-- first try HTML5 playback: if serving as XML, expand `controls` to `controls="controls"` and autoplay likewise       -->
    <!-- warning: playback does not work on iPad/iPhone if you include the poster attribute! fixed in iOS4                   -->
    <video id="video" width="640" height="360" controls autoplay poster="big_buck_bunny_poster.jpg" >
        <!-- MP4 must be first for iPad! -->
        <source src="big_buck_bunny.mp4" type="video/mp4" /><!-- Safari / iOS, IE9 -->
        <source src="big_buck_bunny.webm" type="video/webm" /><!-- Chrome10+, Ffx4+, Opera10.6+ -->
        <source src="big_buck_bunny.ogv" type="video/ogg" /><!-- Firefox3.6+ / Opera 10.5+ -->
        <!-- fallback to Flash: -->
        <object width="640" height="360" type="application/x-shockwave-flash" data="player.swf">
            <!-- Firefox uses the `data` attribute above, IE/Safari uses the param below -->
            <param name="movie" value="player.swf" />
            <param name="flashvars" value="autostart=true&amp;controlbar=over&amp;image=poster.jpg&amp;file=big_buck_bunny.mp4" />
            <!-- fallback image -->
            <img src="big_buck_bunny_poster.jpg" width="640" height="360" alt="Big Buck Bunny"
                title="No video playback capabilities, please download the video below" />
        </object>
    </video>

    <!--The following script is required to make video work on older Android devices-->
    <script type="text/javascript">
        var video = document.getElementById('video');
        video.addEventListener('click', function () {
            video.play();
        }, false);
    </script>
</body>
</html>
